<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>search查询页面</title>
    <style type="text/css">
        body{
            font:15px/1.3 'Open Sans', sans-serif;
            color: #5e5b64;
            background-color: #f5f5f5;
        }
        a, a:visited {
            outline:none;
            color:#389dc1;
        }
        a:hover{
            text-decoration:none;
        }
        .odd{
            color:red;
            background-color: lightblue;
        }
        .even{
            color:blue;
            background-color: #fff9c2;
        }
        #frame{
            width: 520px;
            margin: 50px auto;
            background-color:white;
            border-radius:5px;
            border: 1px solid #e5e5e5;
            box-shadow: 5px 5px 25px #ccc;
        }
        #frame .bar{
            border-radius: 2px;
        }
        #frame .bar input{
            background:#fff no-repeat 13px 13px;
            background-image:url();
            width: 516px;
            line-height: 19px;
            padding: 11px 0;
            text-align: left;
            font-size: 14px;
            font-family: inherit;
            color: #738289;
            font-weight: bold;
            outline: none;
            text-indent: 40px;
        }
        #frame ul{
            list-style: none;
            width: 100%;
            text-align: left;
            margin: 0px;
            padding: 0px;
        }
        #frame ul li{
            border-bottom: 1px dashed #ddd;
            padding: 10px;
            overflow: hidden;
        }
        #frame ul li img{
            width:60px;
            height:60px;
            float:left;
            border:none;
        }
        #frame ul li p, #frame ul li h3{
            font-weight: bold;
            color:#6e7a7f;
            margin: 0px;
            padding: 0px 10px;
            float: left;
        }
        #frame ul li p{
            padding: 10px;
            color: #555;
        }
        #frame .bottom{
            float: right;
        }
        #frame .bottom a{
            float: left;
            width: 28px;
            height: 28px;
            text-align: center;
            line-height: 28px;
            display: inline-block;
            color: #fff;
            margin: 2px;
            text-decoration: none;
        }
        #frame .lost{
            background-color: #ffbf3c;
        }
        #frame .foucs{
            background-color: #2e3eff;
        }
        #frame .show{
            display: block;
        }
        #frame .hide{
            display: none;
        }

    </style>
    <script src="../js/1.4.8/angular.js"></script>
</head>
<body>
<div id="frame" ng-controller="myCtrl">
    <input type="text" ng-model="searchKey" placeholder="请输入你要查找的内容">
    <ul>
        <li ng-repeat="item in items | filter:{title:searchKey} | limitTo:num" ng-class-odd="'odd'" ng-class-even="'even'">
            <img ng-src="{{item.image}}"/>
            <h3>{{item.title}}</h3>
            <p>{{item.date}}</p>
        </li>
    </ul>
    <div class="bottom {{searchKey.length>0?'hide':'show'}}">
        <a href="javascript:void(0)" class="lost {{num==3?'foucs':''}}"  ng-click="num=3">3</a>
        <a href="javascript:void(0)" class="lost {{num==5?'foucs':''}}"  ng-click="num=5">5</a>
        <a href="javascript:void(0)" class="lost {{num==7?'foucs':''}}"  ng-click="num=7">7</a>
        <a href="javascript:void(0)" class="lost {{num==10?'foucs':''}}" ng-click="num=10">10</a>
    </div>
</div>
<script tyte="text/javascript">
    var app = angular.module("app", []);
    app.controller("myCtrl",["$scope","$http",function ($scope,$http) {
        $scope.num = 3;
        $http.get('http://qd.bokanedu.com/tgr/api/index.aspx?day=82&type=search')
                .success(function (data, status, headers, config) {
                    $scope.items = data;
                })
    }]);
</script>
</body>
</html>